<template>
    <view class="winning-record-main">
        <view v-if="Data.recordList.length" class="record-list-container">
            <view v-for="(item, index) in Data.recordList" :key="index">
                <view v-if="item.awardStatus === 2" class="record-item">
                    <view class="left-record">
                        <view
                            ><text class="label">活动：</text
                            ><text class="left-record-text">{{ item.activityName }}</text></view
                        >
                        <view
                            ><text class="label">奖品：</text
                            ><text class="left-record-text">{{ item.awardName }}</text></view
                        >
                        <view
                            ><text class="label">发放方式：</text
                            ><text class="left-record-text">{{
                                item.sendAwardMethod === 1
                                    ? '自动发放'
                                    : item.sendAwardMethod === 2
                                    ? '商家发货'
                                    : '用户自提'
                            }}</text></view
                        >
                    </view>
                    <view class="right-record">
                        <view class="right-record-status">{{ receiveStatus[item.receiveAwardSonStatus] }}</view>
                        <view class="right-record-btn" @click="prizeMesHandler(item)">{{
                            btnStatus[item.receiveAwardSonStatus]
                        }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-record">
            <img class="empty" :src="getImgOssUrl('/ui-prod-2.4.0/no-prize-record@2x.png')" />
            <view class="empty-text">您还没有中奖哦~</view>
        </view>
        <view v-if="showAddr" class="addr-container-bg">
            <view class="addr-container">
                <view class="title-container">
                    <view class="title">{{ Data.title }}</view>
                    <img
                        @click="showAddr = false"
                        :src="getImgOssUrl('/ui-prod-2.6.0/Shape@2x.png')"
                        class="close-img" />
                </view>
                <view v-if="[2, 3].includes(Data.currentChoose.receiveAwardSonStatus)" class="picking-up-addr"
                    >地址：{{ Data.addrDetail }}</view
                >
                <view v-else>
                    <view v-if="[4, 5].includes(Data.currentChoose.receiveAwardSonStatus)" class="addr-receipt-mes">
                        <view class="personal-mes">
                            <view class="name">{{ Data.currentChoose.addressInfo.name }}</view>
                            <view class="mobile">{{ Data.currentChoose.addressInfo.mobile }}</view>
                        </view>
                        <view>{{ Data.currentChoose.addressInfo.address }}</view>
                    </view>
                    <view v-else class="send-goods-mes">
                        <view class="mes-line">
                            <view class="label">发货方式：</view>
                            <view class="mes">{{
                                Data.sendGoodsMes.deliveryMethod === 1 ? '物流配送' : '线下配送'
                            }}</view>
                        </view>
                        <view v-if="Data.sendGoodsMes.deliveryMethod === 1">
                            <view class="mes-line">
                                <view class="label">快递公司：</view>
                                <view class="mes">{{ Data.sendGoodsMes.logisticsCompany }}</view>
                            </view>
                            <view class="mes-line">
                                <view class="label">快递单号：</view>
                                <view class="mes">{{ Data.sendGoodsMes.logisticsNumber }}</view>
                            </view>
                        </view>
                        <view class="mes-line">
                            <view class="label">收货信息：</view>
                            <view class="mes">
                                <view class="personal-mes">
                                    <view class="mes-line-name">{{ Data.currentChoose.addressInfo.name }}</view>
                                    <view class="mobile">{{ Data.currentChoose.addressInfo.mobile }}</view>
                                </view>
                                <view>{{ Data.currentChoose.addressInfo.address }}</view>
                            </view>
                        </view>
                    </view>
                    <view v-if="Data.currentChoose.receiveAwardSonStatus === 4" class="addr-btns">
                        <view @click="chooseReceiveAddr" class="left-btn">从收货地址中选择</view>
                        <view @click="saveAddr" class="right-btn">保存</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="list-loading">
            {{ isBottom && Data.recordList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
        </view>
        <Loading />
    </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import store from '@/store';
import { getImgOssUrl } from '@/commons/utils';
import Loading from '@/components/el-loading';
const receiveStatus = {
    1: '自动发放完成',
    2: '待取货',
    3: '已取货',
    4: '待填写收货地址',
    5: '等待商家发货',
    6: '商家已发货'
};
const btnStatus = {
    1: '查看奖品',
    2: '取货地址',
    3: '取货地址',
    4: '填写地址',
    5: '查看地址',
    6: '发货信息'
};
const orderStore = store.useOrderStore();
const showAddr = ref(false);
let listLoading = ref(false);
const Data = reactive({
    recordList: [],
    title: '',
    addrDetail: '',
    currentChoose: {},
    sendGoodsMes: {},
    page: 1,
    perPage: 10,
    totalCount: 0,
    scrollTop: 0
});
const getRecordList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    const res = await request('luckDrawRecordServ', { page, perPage });
    if (page === 1) {
        Data.recordList = res.data.list || [];
    } else {
        Data.recordList = Data.recordList.concat(res.data.list);
    }
    Data.totalCount = res.data.totalCount;
    listLoading.value = false;
};
getRecordList();
const prizeMesHandler = item => {
    Data.currentChoose = item;
    const { receiveAwardSonStatus } = Data.currentChoose;
    if (receiveAwardSonStatus === 1) {
        router.push('/pages-user/coupon/list/index');
        return;
    }
    showAddr.value = true;
    Data.title = [2, 3].includes(receiveAwardSonStatus)
        ? '奖品取货地址'
        : receiveAwardSonStatus === 4
        ? '填写收货地址'
        : '收货信息';
    if ([2, 3].includes(receiveAwardSonStatus)) {
        Data.addrDetail = item.address;
    } else if (receiveAwardSonStatus === 4) {
        Data.currentChoose.addressInfo = {
            name: '',
            mobile: '',
            address: ''
        };
    } else if (receiveAwardSonStatus === 6) {
        Data.title = '发货信息';
        getSendMes();
    }
};
const getSendMes = async () => {
    const { id } = Data.currentChoose;
    const res = await request('luckDrawDelivceryInfo', { id });
    Data.sendGoodsMes = res.data;
    const { name, mobile, address } = Data.sendGoodsMes.addressInfo;
    Data.currentChoose.addressInfo.name = name;
    Data.currentChoose.addressInfo.mobile = mobile;
    Data.currentChoose.addressInfo.address = address;
};
const chooseReceiveAddr = () => {
    router.push({
        path: '/pages-user/receiptAddress/list',
        query: {
            origin: 'winningRecord'
        }
    });
};
const saveAddr = async () => {
    const { name, mobile, address } = Data.currentChoose.addressInfo;
    const { id } = Data.currentChoose;
    if (!name) {
        return;
    }
    const params = {
        id,
        addressInfo: {
            name,
            mobile,
            address
        }
    };
    const res = await request('luckDrawWriteAddress', params);
    showAddr.value = false;
    Data.page = 1;
    getRecordList();
};
const isBottom = computed(() => {
    return Data.scrollTop > 100;
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
onShow(() => {
    if (typeof orderStore.receiveGoodsAddr === 'string') {
        const copyReceiveGoodsAddr = JSON.parse(orderStore.receiveGoodsAddr);
        if (Object.keys(copyReceiveGoodsAddr).length) {
            const { name, mobile, address } = copyReceiveGoodsAddr;
            Data.currentChoose.addressInfo.name = name;
            Data.currentChoose.addressInfo.mobile = mobile;
            Data.currentChoose.addressInfo.address = address;
        }
    }
});
onReachBottom(() => {
    if (Data.totalCount === Data.recordList.length) {
        return;
    }
    Data.page++;
    getRecordList();
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
